<template>
	<view class="content">

		<!-- 	<view class="top">

			<view class="item">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/sys.png" mode=""></image>
				<view>
					扫一扫
				</view>
			</view>

			<view class="item" @click="ss()">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/ss.png" mode=""></image>
				<view>
					搜索
				</view>
			</view>

		</view>
 -->

		<view class="ss" style="margin: 50rpx;">
			<u-search placeholder="请输姓名" v-model="query" :showAction="false"></u-search>
		</view>

		<view class="employees">

			<view class="em" v-for="(item, index) in employees" :key="index">
				<view class="eminfo">
					{{item.userName}} {{item.sex==1?"男":"女"}}
				</view>

				<view class="detail">

					<view class="info">
						手机号:{{item.phone}}
					</view>

					<view class="info">
						工号:{{item.userNumber}} {{item.userType=="1"?"员工":"管理员"}}
					</view>

					<view class="" style="display: flex; margin-top: 30rpx;">
						<u-button @click="del(item)" type="error" text="确定">移除员工</u-button>
						<u-button type="primary" :plain="true" @click="update(item)">设为{{item.userType=="1"?"管理员":"员工"}}</u-button>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: "",
				companyName: "",
				employees: [

				]
			}
		},
		methods: {
			getdata() {
				var that = this
				this.companyName = this.$store.state.myCompanyName
				uni.setNavigationBarTitle({
					title: this.$store.state.myCompanyName
				})

				this.api.get("/employee/myEmployee/" + this.$store.state.myCompanyId, {}).then(res => {
					console.log(res);
					if (res.code == 200) {
						that.employees = res.data
					}

				})
			},
			update(item) {
				var that=this
				var userType=item.userType=="1"?"2":"1"
				this.api.post("/employee/setAdmin", {
                   userId:item.userId,
				   userType:userType
				}).then(res => {
					console.log(res);
					that.getdata()

				})
			},
			del(item) {
					var that = this
				uni.showModal({
					title: '提示',
					content: '确认删除?此操作不可恢复！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							
							that.api.post("/employee/remove", {
							   userId:item.userId,
							}).then(res => {
								console.log(res);
								that.getdata()
							})
							
							
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		onLoad() {
			this.getdata()


		},
		watch: {
			query(newValue, oldValue) {
				var that = this
				this.api.post("/employee/myEmployeeByQuery/", {
					userName: newValue,
					companyId: this.$store.state.myCompanyId
				}).then(res => {
					that.employees = res.data
					console.log(res);
				})
			},
		},
	}
</script>

<style>
	.employees {
		width: 100%;

	}

	.em {
		padding: 20rpx;
		width: 90%;
		margin: 20rpx auto;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;

	}

	.top {

		display: flex;
		/* 	border-top: #BBBCC6 1px solid;
		border-bottom:#BBBCC6 1px solid; */
		background-color: #BBBCC6;
	}

	.son {
		padding: 10px;
		font: 700;
		font-size: large;
		display: flex;
	}

	.item {
		margin: 30rpx;
	}
</style>
